<template>
  <span
    v-if="text && text.length <= 20"
    class="inline-block mr-1 text-[#454954]"
  >
    {{ text }}
  </span>
  <el-tooltip
    v-if="text && text.length > 20"
    effect="dark"
    trigger="hover"
    placement="top"
    :content="text"
  >
    <span class="inline-block mr-1 cursor-pointer text-[#454954]">
      {{ text.substring(0, 15) + '...' }}
    </span>
  </el-tooltip>
  <el-popover
    width="380"
    trigger="hover"
    :effect="effect"
    popper-class="host-tips-popover"
  >
    <template #reference>
      <app-icon name="help" color="#8A8E9A" class="w-[16px] h-[16px]" />
    </template>
    <div class="w-full host-tips-content">
      <p class="tips-item">主机记录就是域名前缀，常见用法有：</p>
      <p class="tips-item"><span>www：</span>解析后的域名为www.example.com。</p>
      <p class="tips-item"><span>@：</span>直接解析主域名 example.com。</p>
      <p class="tips-item">
        <span>*：</span>泛解析，匹配其他所有域名 *.example.com。
      </p>
      <p class="tips-item">
        <span>mail：</span
        >将域名解析为mail.example.com，通常用于解析邮箱服务器。
      </p>
      <p class="tips-item">
        <span>二级域名：</span>如：abc.example.com，填写abc。
      </p>
      <p class="tips-item"><span>手机网站：</span>如：m.example.com，填写m。</p>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
interface IProps {
  text?: string
  effect?: 'dark' | 'light'
}

withDefaults(defineProps<IProps>(), {
  effect: 'light',
  text: '.example.com'
})
</script>
<style lang="scss">
.host-tips-popover {
  --el-popover-padding: 8px;
  .host-tips-content {
    font-size: 12px;
    color: #454954;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 400;
    .tips-item {
      white-space: nowrap;
      text-align: justify;
    }
    p {
      margin: 4px 0;
      span {
        font-weight: 600;
      }
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>
